<template>
  <u-popup :show="showCertificate" :round="10" @close="close">
    <view class="certificate-popup-counter">
      <view class="top-popup-counter">
        <view class="left-cancel" @click="showCertificate = false">取消</view>
        <view class="center-title">支付密码</view>
        <view class="right-confirm" @click="handleConfirm">确定</view>
      </view>
      <view class="popup-content-main">
        <view class="content-title">为了您的资金安全，请输入钱包密码</view>
        <input
          class="uni-input"
          :value="pursePassword"
          type="password"
          placeholder="请输入钱包密码"
          @input="handleInput"
        />
        <view class="slip-password" @click="handleSlipPassword"
          >忘记密码？</view
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pursePassword: "",
    };
  },
  computed: {
    showCertificate: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  mounted() {},
  methods: {
    close() {
      this.showCertificate = false;
    },
    handleInput(e) {
      this.pursePassword = e.target.value;
    },
    // 忘记密码
    handleSlipPassword() {
      uni.navigateTo({
        url: "/pages/drawerPage/purse/updatePursePassword",
      });
      this.showCertificate = false;
    },
    // 确定
    handleConfirm() {},
  },
};
</script>

<style lang="scss" scoped>
.certificate-popup-counter {
  .top-popup-counter {
    padding: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #f6f6f6;
    .left-cancel {
      font-size: 26rpx;
      color: #999;
    }
    .center-title {
      font-size: 28rpx;
      color: #333;
    }
    .right-confirm {
      font-size: 26rpx;
      color: #76bed7;
    }
  }
  .popup-content-main {
    padding: 60rpx 24rpx 24rpx;
    .content-title {
      text-align: center;
      font-size: 30rpx;
      color: #333;
    }
    .uni-input {
      background: #f4f4f4;
      padding: 24rpx;
      border-radius: 16rpx;
      margin-top: 60rpx;
    }
    .slip-password {
      font-size: 26rpx;
      color: #76bed7;
      margin-top: 24rpx;
    }
  }
}
</style>
